<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		
		<title></title>
		<style type="text/css">
			#div1 {
			
					width: 100px;
					height: 100px;
					background-color: orange;
					position: absolute;
					top: 0px;
					left: 0px;
					opacity: 0.5;
				
			}
		</style>
	</head>
	<body>
		<p id="p">点我呀！！！</p>
		<!-- <a href="http://www.miaov.com">点我呀！！！</a> -->
		<div id="div1">

		</div>
		<script type="text/javascript">
			/*
			移动端的点透：
			当上层元素发生点击的时候，下层元素也有点击（焦点）特性，在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到下层元素身上，就会触发点击行为。
			解决：
			1.下层不要使用有点击（焦点）特性的元素a。
			2.阻止PC默认事件
			3.移动端尽量不要用PC事件click,会有不兼容 
			*/
		   document.addEventListener("touchstart",function(ev){
			   ev.preventDefault();
		   })
		   
			var div = document.getElementById('div1');
			var p = document.getElementById('p');
			div.addEventListener('touchend', end);
			p.addEventListener('touchstart', function() {
				alert('1111');
			});

			function end() {
				this.style.display = 'none';
			}
		</script>
	</body>
</html>
